<template>
  <div class="content" @scroll="scroll()">
    <div class="header">
      <div class="look">
        <span>LO</span>
        <span class="zuanshi">
            <i class="iconfont icon-xingzhuang159fuben13"></i>
            <i class="iconfont icon-font-five-v"></i>
        </span>
        <span>OK</span>
      </div>
      <i class="iconfont icon-search"></i>
    </div>
    <ul class="nav">
      <li>推荐</li>
      <li>包包</li>
      <li>鞋履</li>
      <li>服装</li>
      <li>配饰</li>
      <li>明星</li>
      <li>美容</li>
      <li>中国设计师</li>
      <li>男装</li>
      <!--<li>童装</li>-->
      <!--<li>家居设计</li>-->
      <!--<li>sale特卖</li>-->
      <!--<li>畅销榜</li>-->
      <!--<li>大牌</li>-->
      <!--<li>小众品牌</li>-->
      <!--<li>场景</li>-->
      <!--<li>新品</li>-->
    </ul>
    <div class="pages swiper-container">
      <div class="swiper-wrapper">
        <div class="page1 swiper-slide">
          <div class="swiper-container banner">
            <div class="swiper-wrapper">
              <img src="../../assets/img/zindex02.png" alt="" class="swiper-slide">
              <img src="../../assets/img/zindex03.png" alt="" class="swiper-slide">
              <img src="../../assets/img/zindex04.png" alt="" class="swiper-slide">
              <img src="../../assets/img/zindex05.png" alt="" class="swiper-slide">
              <img src="../../assets/img/zindex06.png" alt="" class="swiper-slide">
              <img src="../../assets/img/zindex07.png" alt="" class="swiper-slide">
              <img src="../../assets/img/zindex08.png" alt="" class="swiper-slide">
              <img src="../../assets/img/zindex09.png" alt="" class="swiper-slide">
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>
          <ul class="onerow">
            <li @click="pages10()"><i class="iconfont icon-pinpai"></i>品牌</li>
            <li @click="pages11()"><i class="iconfont icon-file-o-copy"></i>分类</li>
            <li><i class="iconfont icon-bag"></i>电商</li>
            <li><i class="iconfont icon-zhekoub"></i>折扣</li>
          </ul>
          <p class="tworow"><span>全球同步促销</span><span>查看全部</span></p>
          <div class="threerow swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="../../assets/img/zindex02.png" alt=""><p>FWRD新品低至3折 | 男装篇 Thom Browne/Vetements/Loewe等</p></div>
              <div class="swiper-slide"><img src="../../assets/img/zindex04.png" alt=""><p>Shopbop 满额7折 | 服装篇 TIBI/Kenzo/Calvin Underwear等</p></div>
              <div class="swiper-slide"><img src="../../assets/img/zindex06.png" alt=""><p>Shopbop 满额7折 | 服装篇 TIBI/Kenzo/Calvin Underwear等</p></div>
              <div class="swiper-slide"><img src="../../assets/img/zindex08.png" alt=""><p>Shopbop 满额7折 | 服装篇 TIBI/Kenzo/Calvin Underwear等</p></div>
              <div class="swiper-slide"><img src="../../assets/img/zindex09.png" alt=""><p>Shopbop 满额7折 | 服装篇 TIBI/Kenzo/Calvin Underwear等</p></li>
                <div class="swiper-slide"><img src="../../assets/img/zindex11.png" alt=""><p>Shopbop 满额7折 | 服装篇 TIBI/Kenzo/Calvin Underwear等</p></div>
              </div>
            </div>
          </div>
          <div class="fourrow"><img src="../../assets/img/zindex13.png" alt=""><span class="square"></span></div>
          <div class="fiverow">
              <div class="product1"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          <div class="fourrow"><img src="../../assets/img/zindex10.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="page2 swiper-slide">
          <div class="fourrow"><img src="../../assets/img/zindex18.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
          <div class="fourrow"><img src="../../assets/img/zindex17.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="page3 swiper-slide">
          <div class="fourrow"><img src="../../assets/img/zindex14.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
          <div class="fourrow"><img src="../../assets/img/zindex15.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="page4 swiper-slide">
          <div class="fourrow"><img src="../../assets/img/zindex12.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
          <div class="fourrow"><img src="../../assets/img/zindex03.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="page5 swiper-slide">
          <div class="fourrow"><img src="../../assets/img/zindex05.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
          <div class="fourrow"><img src="../../assets/img/zindex07.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="page6 swiper-slide">
          <div class="fourrow"><img src="../../assets/img/zindex12.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
          <div class="fourrow"><img src="../../assets/img/zindex13.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="page7 swiper-slide">
          <div class="fourrow"><img src="../../assets/img/zindex14.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
          <div class="fourrow"><img src="../../assets/img/zindex15.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="page8 swiper-slide">
          <div class="fourrow"><img src="../../assets/img/zindex16.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
          <div class="fourrow"><img src="../../assets/img/zindex17.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="page9 swiper-slide">
          <div class="fourrow"><img src="../../assets/img/zindex18.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
          <div class="fourrow"><img src="../../assets/img/zindex11.png" alt=""><span class="square"></span></div>
          <div class="fiverow swiper-container">
            <div class="swiper-wrapper">
              <div class="product1 swiper-slide"><img src="../../assets/img/indexproduct01.png" alt=""></div>
              <ul class="swiper-slide">
                <li  v-for="n in products">
                  <img :src="n.src" alt=""><p><span>￥</span><span>{{n.price}}</span></p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
//  import "../../assets/js/jquery-1.8.3.min";

    export default {
      data(){
        return{
          maxScrollTop:0,
          products:[]
        }
      },
      methods:{
        scroll:function() {
            var scrollTop=$(".content")[0].scrollTop;
            if (scrollTop>=this.maxScrollTop){
              $(".nav").css({
                "position":"fixed",
                "top":"0px",
              });
              $(".pages").css({
                "marginTop":this.maxScrollTop+"px"
              })
            }
            else {
              $(".nav").css({
                "position":"static"
              });
                $(".pages").css({
                  "marginTop":"0px"
                })
            }
          },
        pages11:function () {
          this.$router.push({path:"/ShopClassify"})
        },
        pages10:function () {
          this.$router.push({path:"/ShopBrand"})
        }
      },
      mounted:function () {
        var that=this;
//获取数据
        fetch("http://localhost:3000/getProduct/getProducts").then(function(response) {
          return response.json();
        }).then(function(data) {
          that.products=data;
//          console.log(that.products)
        }).catch(function(e) {
          console.log(e);
        });
        this.maxScrollTop=$(".nav")[0].offsetTop;
        var swiper1 = new Swiper ('.banner', {
          direction: 'horizontal',
          autoplay: 2000,
          loop: true,
          paginationClickable :true,
          autoplayDisableOnInteraction : false,
          // 如果需要分页器
          pagination: '.swiper-pagination',

        });
        var swiper2 = new Swiper ('.pages', {
          direction: 'horizontal',
          autoHeight: true,
          noSwiping:true,
          noSwipingClass:'fiverow',
          onSlideChangeStart: function(swiper){
            $(".nav li").eq(swiper.activeIndex).css({
              color:"#BAA891",
              borderBottom:"2px solid #BAA891",
            });
            $(".nav")[0].scrollLeft=$(".nav li").eq(swiper.activeIndex)[0].offsetLeft;
            $(".nav li").eq(swiper.activeIndex).siblings().css({
              color:"#DDDDDD",
              border:"none",
            });
          }
        });
        var swiper3=new Swiper('.threerow',{
          direction: 'horizontal',
          autoplay: 3000,
          autoplayDisableOnInteraction:false,//触碰过后依然可以自动播放
          effect : 'coverflow',
          slidesPerView: 'auto',
          centeredSlides: true,
          loop:true,
          coverflow: {
            rotate: 5,
            stretch: -30,
            depth: 200,
            modifier: 1,
            slideShadows : false
          },
          initialSlide :1
        });
        // var swiper4=new Swiper('.fiverow',{
        //   direction: 'horizontal',
        //   freeMode : true,
        //   slidesPerView:'auto',
        //   autoheight:true,
        //   autowidth:true,
        // });
        $(".nav li").click(function () {
          $(this).css({
            color:"#BAA891",
            borderBottom:"2px solid #BAA891",
          });
          $(".nav")[0].scrollLeft=$(this)[0].offsetLeft;
          $(this).siblings().css({
            color:"#DDDDDD",
            border:"none",
          });
          var idx=$(this).index();
          swiper2.slideTo(idx, 1000, false);
        });
      }
    }
</script>
<style scoped>
  .fiverow .swiper-slide {
    overflow-x: auto!important;
    -webkit-overflow-scrolling: touch!important;
  }
  .content{
    flex: 1;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: white;
  }
  .header{
    width:100%;
    height: 0.5rem;
    background-color:#1B1B1B;
    overflow: hidden;
    position: relative;
  }
  .header .look{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #C3AF97;
    font-size: 0.35rem;
    font-weight: 600;
    font-family:"楷体";
    letter-spacing: 0.02rem;
  }
  .header .look .zuanshi{
    position: relative;
    display: block;
    height: 0.5rem;
    width: 0.5rem;
    margin: 0 0.05rem;
  }
  .header .look .zuanshi .icon-xingzhuang159fuben13{
    font-size: 0.35rem;
    position: absolute;
    top: 0.08rem;
  }
  .header .look .zuanshi .icon-font-five-v{
    font-size:0.25rem;
    color: #000000;
    position: absolute;
    top: 0.12rem;
    left: 0.1rem;
  }
  .header .icon-search{
    position: absolute;
    color: #ffffff;
    top: 0.13rem;
    font-size: 0.26rem;
    right: 0.15rem;
  //color: #C3AF97;
  }
  .nav{
    background-color: #1B1B1B;
    overflow-x: auto;
    display: flex;
    padding: 0.1rem 0rem;
    z-index: 999;
    width: 100%;
  }
  .nav li{
    font-size: 0.16rem;
    padding: 0.02rem 0rem;
    color: #DDDDDD;
    white-space: nowrap;
    margin: 0rem 0.12rem;
  }
  .nav li:first-child{
    color:#BAA891;
    border-bottom: 2px solid #BAA891;
  }
  .page1{
    width: 100%;
  }
  .page1 .banner{
    width: 100%;
    height: 1.67rem;
  }
  .page1 .banner img{
    width: 100%;
    height: 100%;
  }

  .banner .swiper-pagination-bullet{
    width: 7px!important;
    height: 7px!important;
  }
  .banner .swiper-pagination-bullet-active{
    background-color: white!important;
  }
  .banner>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px!important;
  }
  .onerow{
    background-color: white;
    width: 100%;
    height: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .onerow li{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.1rem;
    align-items: center;
    height: 0.6rem;

  }
  .onerow li .iconfont{
    font-size: 0.4rem;
  }
  .onerow li .icon-file-o-copy{
    font-size: 0.3rem;
    margin-top: 0.06rem;
  }
  .onerow li .icon-bag{
    font-size: 0.3rem;
    margin-top: 0.03rem;
  }
  .onerow li .icon-zhekoub{
    font-size: 0.35rem;
    margin-top: 0.04rem;
  }
  .tworow{
    width: 100%;
    padding:0.2rem 0.1rem;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    background-color: white;
  }
  .tworow span:first-child{
    font-size: 0.18rem;
  }
  .tworow span:last-child{
    font-size: 0.14rem;
    color: #EE2165;
  }
  .threerow {
    display: flex;
    overflow-x: scroll;
    padding-left: 0.1rem;
    height: 1.6rem;
  }
  .threerow .swiper-wrapper{
    display: flex;
  }
  .threerow .swiper-slide{
    font-size: 0.14rem;
    margin-right: 0.1rem;
    height: 100%;
    width: 2.2rem!important;
  }
  .threerow .swiper-slide img{
    width: 2.2rem;
  //margin-bottom: 0.15rem;
  //height: 1rem;
  }
  .threerow .swiper-slide p{
    padding: 0.15rem 0rem;
  }
  .fourrow{
    margin-top: 0.1rem;
    width: 100%;
    position: relative;
  //height: 1.6rem;
  }
  .fourrow img{
    width: 100%;
  //height: 100%;
  }
  .fourrow .square{
    position: absolute;
    bottom: -0.12rem;
    left: calc(50% - 0.05rem);
    display: block;
  //width: 0.2rem;
  //height: 0.2rem;
    border-style:solid;
    border-width: 0.1rem;
    border-color: transparent transparent white white;
  //background-color: white;
    transform: rotate(136deg);
  }
  .fiverow{
    height: 2.6rem;
    overflow-x: auto;
    padding: 0.15rem 0rem 0.15rem 0.15rem;
    box-sizing: border-box;
    width: 100%;
    /*display: flex;*/
    /*justify-content: flex-start;*/
    white-space: nowrap;
  }
  .fiverow .product1{
    width: 50%;
    height: 100%!important;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    /*display: inline-block;*/
  }

  .fiverow ul{
    display: flex;
    height: 100%!important;
  //display: inline-block;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    /*overflow-x: hidden;*/
    overflow-y: hidden;
  //padding-right: 0.15rem;
  }
  .fiverow ul li {
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.16rem;
    border: 1px solid #DCDCDC;
    display: flex;
    padding: 0.1rem;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-right: 0.1rem;
  }
  .fiverow ul li img{

    height: 67%;
  }
</style>
